/*大屏*/
(function () {
    'use strict';
    var myChart = echarts.init(document.getElementById('left-header-nong'));

    // 初始化图表配置
    function initChart(data) {
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: data.times,
                axisLabel: {
                    rotate: 40,
                    fontSize: 10,
                    color: '#fff'
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff'
                }
            },
            series: [{
                name: '设备数量',
                type: 'line',
                data: data.values,
                itemStyle: {
                    color: '#ff5476'
                },
                smooth: true,  // 平滑曲线
                areaStyle: {   // 添加区域填充
                    opacity: 0.3
                },
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 10,
                    color: '#ff5476'
                }
            }],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                top: '15%',
                containLabel: true
            }
        };
        
        myChart.setOption(option);
    }

    // 从后端获取数据并更新图表
    function updateChart() {
        fetch('http://localhost:5000/congestion')
            .then(response => response.json())
            .then(data => {
                initChart(data);
            })
            .catch(error => console.error('获取数据失败:', error));
    }

    // 首次加载
    updateChart();

    // 每10秒更新一次数据
    setInterval(updateChart, 10000);

    // 窗口大小改变时调整图表
    window.addEventListener('resize', function() {
        myChart.resize();
    });
})();